<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-copy"></i>用户审批</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="message">
                <el-tab-pane :label="`待审批用户(${unread.length})`" name="first">
                    <el-table :data="unread" :show-header="false" style="width: 100%">
                        <el-table-column>
                            <template slot-scope="scope">
                                <span class="message-title">{{ scope.row.username }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" width="180"></el-table-column>
                        <el-table-column width="120">
                            <template slot-scope="scope">
                                <el-button size="small" @click="handleRead(scope.$index)">同意申请</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="handle-row">
                        <el-button type="primary">全部同意</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { pass, get_user } from '../../api/api';
export default {
    name: 'tabs',
    data() {
        return {
            message: 'first',
            showHeader: false,
            unread: []
        };
    },
    methods: {
        // 审核通过
        handleRead(index) {
            pass({ username: this.unread[index].username }).then(res => {
                this.$message(res.data.msg);
                this.unread.splice(index, 1);
            });
        },
        // 获取待审批F的用户列表
        get_users() {
            get_user().then(res => {
                this.unread = res.data.data;
            });
        }
    },
    computed: {
        unreadNum() {
            return this.unread.length;
        }
    },
    mounted: function() {
        this.get_users();
    }
};
</script>

<style>
.message-title {
    cursor: pointer;
}
.handle-row {
    margin-top: 30px;
}
</style>

